<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main
          v-loading="loading"
          element-loading-text="文件正在上传导入数据库，请稍候..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.5)">
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">添加作业</b>
              </div>
            </el-col>
          </el-row>
          <el-divider content-position="left"><i class="el-icon-s-unfold"></i>&nbsp;&nbsp;作业信息</el-divider>
          <div style="width: 650px;margin: 0 150px; border: 1px solid #eee">
            <div style="margin: 10px 10px;margin-right: 80px;">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="margin: 10px auto;" label-width="100px"
                       class="demo-ruleForm">
                <el-form-item label="作业名称" prop="taskName">
                  <el-input v-model="ruleForm.taskName"></el-input>
                </el-form-item>
                <el-form-item label="班级名称" prop="classroomName">
                  <el-select v-model="ruleForm.classroomName" clearable placeholder="请选择">
                    <el-option
                      v-for="item in classroomNames"
                      :key="item.classroomName"
                      :label="item.classroomName"
                      :value="item.classroomName">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="课程名称" prop="courseName">
                  <el-select v-model="ruleForm.courseName" clearable placeholder="请选择">
                    <el-option
                      v-for="item in courseNames"
                      :key="item.courseName"
                      :label="item.courseName"
                      :value="item.courseName">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                  <el-input type="date" v-model="ruleForm.startTime"></el-input>
                </el-form-item>
                <el-form-item label="截止时间" prop="endTime">
                  <el-input type="date" v-model="ruleForm.endTime"></el-input>
                </el-form-item>
                <el-form-item label="作业描述" prop="taskDescribe">
                  <el-input  v-model="ruleForm.taskDescribe"></el-input>
                </el-form-item>
                <el-divider content-position="left">&nbsp;上传附件</el-divider>
                <div style="margin: 10px 50px;">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    name="enclosureFile"
                    :action="uploadUrl()"
                    accept="application/msword,application/pdf"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="fileuploadSuccess"
                    :on-progress="fileUploading"
                    :file-list="fileList"
                    :auto-upload="false">
                    <el-button slot="trigger" size="medium" type="primary">选取文件<i class="el-icon-upload el-icon--right"></i></el-button>
                    <div slot="tip" class="el-upload__tip">只能上传pdf或者word文件</div>
                  </el-upload>
                </div>
                <el-form-item style="margin-top: 35px;">
                  <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>

          <div style="width: 650px;margin: 0 150px; border: 1px solid #eee">

          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/teacherSide/left'
import Top from '@/components/teacherSide/top'

export default {
  name: 'addTask',
  data () {
    return {
      classroomNames: [],
      courseNames: [],
      teacherId: '',
      loading: false,
      fileList: [],
      ruleForm: {
        classroomName: '',
        courseName: '',
        taskName: '',
        taskDescribe: '',
        startTime: '',
        endTime: ''
      },
      rules: {
        taskName: [
          {required: true, message: '请输入作业名称', trigger: 'blur'},
          {min: 1, max: 30, message: '长度最长为30字', trigger: 'blur'}
        ],
        taskDescribe: [
          {required: false, message: '请输入作业描述', trigger: 'blur'},
          {min: 1, max: 50, message: '长度最长为50字', trigger: 'blur'}
        ],
        startTime: [
          {required: true, message: '请选择开始时间', trigger: 'blur'}
        ],
        endTime: [
          {required: true, message: '请选择截止时间', trigger: 'blur'}
        ],
        classroomName: [
          {required: true, message: '请选择所属班级', trigger: 'blur'}
        ],
        courseName: [
          {required: true, message: '请选择所属课程', trigger: 'blur'}
        ]
      }
    }
  },
  beforeMount () {
    this.getTeacherId()
  },
  mounted () {
    this.getAllClassroomNames()
    this.getAllCourseNames()
  },
  methods: {
    // 获取教师id
    getTeacherId () {
      this.teacherId = JSON.parse(localStorage.getItem('teacher')).teacherId
    },
    // 获取当前老师名下的所有课程名称
    getAllCourseNames () {
      this.$axios.post('http://localhost:8888/getAllCourseNameByTeacherId/' + this.teacherId).then(res => {
        this.courseNames = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 获取当前老师名下的所有班级名称
    getAllClassroomNames () {
      this.$axios.post('http://localhost:8888/getAllClassroomByTeacherId/' + this.teacherId).then(res => {
        this.classroomNames = res.data.data
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 上传附件URL
    uploadUrl: function () {
      return (
        'http://localhost:8888/teacherGetTaskEnclosure/' + this.teacherId
      )
    },
    // 文件上传成功时的钩子
    fileuploadSuccess () {
      this.loading = false
      this.$message({
        message: '恭喜你，文件上传成功',
        type: 'success'
      })
    },
    // 上传文件之前的钩子
    beforeUpload (file) {
      if (file.type !== 'application/msword' || file.type !== 'application/pdf') {
        this.$message({
          message: '警告哦，只能上传pdf或者word文件',
          type: 'warning'
        })
        return false
      }
      return true
    },
    // 文件上传时的钩子
    fileUploading () {
      this.loading = true
      this.$message('文件正在上传，请稍后....')
    },
    // 文件列表移除文件时的钩子
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview (file) {
      console.log(file)
    },
    // 创建作业并上传附件
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        // 上传表单信息
        if (valid) {
          // 上传附件
          this.$refs.upload.submit()
          // 提交表单给后端
          this.$axios.post('http://localhost:8888/teacherCreateTask/' + this.teacherId, this.ruleForm).then(res => {
            if (res.data.flag) {
              this.$message({
                message: '恭喜你，作业添加成功',
                type: 'success'
              })
              // 清空表单数据
              this.ruleForm.classroomName = ''
              this.ruleForm.courseName = ''
              this.ruleForm.taskName = ''
              this.ruleForm.taskDescribe = ''
              this.ruleForm.startTime = ''
              this.ruleForm.endTime = ''
            } else {
              this.$message.error('错了哦，作业添加失败,请重新添加作业')
            }
          }).catch(err => {
            return Promise.reject(err)
          })
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  components: {
    Left,
    Top
  }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #cadcf5;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #42b983;
}
</style>
<style scoped>
.router-link-active {
  text-decoration: none;
  color: yellow;
}

a {
  text-decoration: none;
  color: cadetblue;
}
</style>
